<template>
  <!-- 热榜 -->
  <div class="hot">
    <!-- 标题 -->
    <h3>
      <slot name="title"></slot>
    </h3>
    <!-- 数据展示 -->
    <section>
      <ul v-if="list">
        <li v-for="(item, index) in list" :key="index" @click="view(item)">
          <!-- 序号 -->
          <span class="num">{{ index + 1 }}</span>
          <!-- 标题 -->
          <span class="title">{{ item.title }}</span>
          <!-- 热度 -->
          <span class="tempture">
            <i class="iconfont icon-fire"></i>{{ item.hotness }}
          </span>
        </li>
      </ul>
      <div v-else class="no-data">
        - 暂无文章 -
      </div>
    </section>
    <!-- 查看更多 -->
    <span class="more" v-show="!more" @click="goToPassage">查看更多 >></span>
  </div>
</template>

<script setup>
// list: 热榜数据 more: 是否显示查看更多
defineProps(['list', 'more'])
import { reqAddView } from '@/apis/passage'
import { GET_USERID } from '@/utils/tokenAndId'
import { useRoute, useRouter } from 'vue-router'

let router = useRouter()
let route = useRoute()

// 点击查看更多时跳转到热门文章列表
const goToPassage = () => {
  router.push({ path: '/passage', query: { type: '热门' } })
}

// 点击文章后查看文章的同时增加文章浏览量
const view = async (item) => {
  let res = await reqAddView({ userId: GET_USERID(), passageId: item.id })
  if (res.code == 200) {
    router.push(`/viewpassage/${item.id}`)
  } else {
    console.log('浏览量增加失败');
  }
}
</script>

<style lang="scss" scoped>
// 热榜
.hot {

  // 标题
  h3 {
    margin-bottom: .25rem;
    font-size: .333rem;
    color: #654321;
    cursor: default;
  }

  // 数据展示
  section {
    ul {
      li {
        display: flex;
        justify-content: space-evenly;
        margin-bottom: .1rem;
        border-bottom: 1px solid transparent;
        padding: .1rem;
        font-size: .3rem;
        cursor: pointer;

        // 标题
        .title {
          display: inline-block;
          overflow: hidden;
          margin: 0 .1rem;
          width: 4.5rem;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        // 热度
        .tempture {
          i {
            font-size: .25rem;
            color: red;
          }
        }

        &:hover {
          background-color: #f9f0f0;
        }
      }

      // 热度第一的
      :nth-child(1) {
        .num {
          color: #E14731;
        }
      }

      // 热度第二的
      :nth-child(2) {
        .num {
          color: #E19835;
        }
      }

      // 热度第三的
      :nth-child(3) {
        .num {
          color: #E6CE35;
        }
      }
    }

    .no-data {
      font-size: .3333rem;
      text-align: center;
      color: #654321;
    }
  }

  // 查看更多
  .more {
    float: right;
    margin-top: .1667rem;
    font-size: .25rem;
    cursor: pointer;
  }

  // 清除浮动
  &::after {
    content: '';
    display: block;
    clear: both;
  }
}
</style>